import "./style.css";

const btnLightColor = ["#ff0000", "#00ff00", "#ffff00"]

const btns = document.querySelectorAll("a");

btns.forEach((btn, index) => {
    btn.style.setProperty("--color", btnLightColor[index]);
    btn.addEventListener("mousemove", event => {
        // 获取鼠标移动位置
        const { x, y } = event;
        // 计算背景发光元素的位置
        const { left, top } = btn.getBoundingClientRect();
        // 定位背景发光元素
        // 注意：不能出现负值，要不然元素会在按钮外一直跟着鼠标移动
        const moveLeft = x - left > 0 ? x - left : 0;
        const moveTop = y - top > 0 ? y - top : 0;
        // 设置背景发光元素的位置
        // 注意：不能设置 style 属性，这会把之前设置的发光颜色变量覆盖掉
        // btn.setAttribute("style", `--left: ${moveLeft}px; --top: ${moveTop}px;`);
        btn.style.setProperty("--left", `${moveLeft}px`);
        btn.style.setProperty("--top", `${moveTop}px`);
    });
});
